<!--
 * @Author: gyc
 * @Date: 2020-05-21 10:10:40
 * @LastEditTime: 2020-08-25 14:47:47
 * @Description: Nuxt测试版
--> 
<template>
<div class="repwd-account">
    <div class="repwd-title">密码修改</div>
    <div class="repwd-account-item">
        旧的密码:
        <input type="password" v-model="oldPwd" />
    </div>
    <div class="repwd-account-item">
        新的密码:
        <input type="password" v-model="newPwd" />
    </div>
    <div class="repwd-account-item">
        确认密码:
        <input type="password" v-model="rePwd" @blur="rePwdCheck" />
        <span style="margin-left:20px;color:#FF5773" v-if="reMsg">
            <Icon type="md-checkmark" />
        </span>
        <span style="margin-left:20px;color:#FF5773" v-if="!reMsg && rePwd">
            <Icon type="md-close" />
        </span>
    </div>
    <div class="repwd-btn">
        <sao-button :type="2" msg="保存" @confirm="resetPwd" color="black"></sao-button>
        <sao-button :type="1" msg="忘记密码" @confirm="resetPwd"></sao-button>
    </div>
</div>
</template>

<script>
import saoButton from "@/components/button/button_sao";
export default {
    name: "moRePwd",
    layout: "userPage",
    data() {
        return {
            oldPwd: "",
            newPwd: "",
            rePwd: "",
            reMsg: false,
        };
    },
    methods: {
        resetPwd() {
            if (
                this.rePwd &&
                this.oldPwd &&
                this.newPwd &&
                this.newPwd === this.rePwd
            ) {
                this.$axios("/api/user/userReword", {
                    params: {
                        userid: this.$dec(localStorage.getItem("loginCode")),
                        newPwd: this.$enc(this.newPwd),
                        oldPwd: this.$enc(this.oldPwd),
                    },
                }).then((res) => {
                    if (res.data.code === "200") this.$Message.success("密码修改成功!");
                    if (res.data.code === "201") this.$Message.info(res.data.data);
                    if (res.data.code === "500") this.$Message.error(res.data.data);
                });
            } else {
                this.$Message.error("信息不全或两次密码不一致!");
            }
        },
        rePwdCheck() {
            if (this.newPwd === this.rePwd) {
                this.reMsg = true;
            } else {
                this.reMsg = false;
            }
        },
    },
    components: {
        "sao-button": saoButton,
    },
};
</script>

<style lang="scss" scoped>
input {
    width: 120px;
    outline: none;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #aaa;
    text-align: center;
    margin-left: 5px;

    &:focus {
        border-bottom: 1px solid black;
    }

    &:focus label {
        font-size: 24px;
    }
}

.repwd-account {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // padding: 10px;
    background-color: white;
    align-items: flex-start;

    .repwd-title {
        display: flex;
        position: relative;
        width: 100%;
        padding-left: 20px;
        justify-content: flex-start;
        height: 45px;
        align-items: center;
        font-size: 18px;

        &::before {
            position: absolute;
            content: "";
            width: 4px;
            height: 18px;
            background-color: $gcolor;
            left: 10px;
            top: 12.4px;
            border-radius: 2px;
        }
    }

    .repwd-account-item {
        display: flex;
        align-items: center;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        letter-spacing: 2px;
    }

    .repwd-btn {
        display: flex;
        justify-content: space-evenly;
        width: 100%;
        height: auto;
        padding-top: 20px;
        align-items: center;
        margin-top: 20px;

        button {
            width: 80px;
            height: 35px;
            outline: none;
            border: 0;
            background-color: $gcolor;
            color: white;
            cursor: pointer;
            transition: all 0.4s ease-in-out;

            &:hover {
                box-shadow: 0px 0px 4px $gcolor;
            }
        }
    }
}
</style>
